import { lazy,Suspense } from "react";
import { Navigate, useRoutes } from "react-router-dom";
let Home = lazy(()=>import("../views/Home"));
let About = lazy(()=>import("../views/About"));
let Cart = lazy(()=>import("../views/Cart"));
let elements= [
    {
        path:'/',
        element:<Navigate to='/home'></Navigate>
    },{
        path:"/home",
        element:<Suspense fallback='loading...'><Home/></Suspense>
    },{
        path:"/about",
        element:<Suspense fallback='loading...'><About/></Suspense>
    },{
        path:"/cart",
        element:<Suspense fallback='loading...'><Cart/></Suspense>
    }
]

function RouterView(){
    let element = useRoutes(elements);
    return (
        <div>
            {element}
        </div>
    )
}


export default RouterView;